<template>
	<div class="yellow">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>订单评价</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox">
			<div class="ordermsg">
				<div class="msgbox" style="height: 80vh;">
					<div class="title">打个分吧~</div>
					<div class="flex a-center j-center rate">
						<van-rate  v-model="obj.evalStars" :size="30" color="#fe7537" void-icon="star" void-color="#eee"/>
					</div>					
					<div class="title" style="padding: 0.25rem 0px;">夸夸商品吧~</div>					
					<div class="tagbox">
						<div class="item" v-for="(v,i) in tagList" :key="v.tagId" :class="{'on':v.s}" @click="selectag(v,i)">{{v.tagName}}</div>
					</div>
					
					<div class="context">
						<textarea placeholder="请输入评论" v-model="obj.evalDesc"></textarea>
						<div class="imggroup">
							<div class="item remove" v-for="(v,i) in obj.picUrlList" :key="v" @click="remove(i)">
								<img :src="v.picUrl">
							</div>
							<div class="item bg" v-if="obj.picUrlList.length<4">
								<span v-if="obj.picUrlList.length"><input type="file" accept="image/*" @change="uploadImg">{{obj.picUrlList.length}}/4</span>
								<span v-else>
									<input type="file" accept="image/*" @change="uploadImg">
									添加图片
								</span>
							</div>
						</div>
					</div>
					<button :disabled="!obj.evalDesc||!obj.evalStars" @click="submit">提交评论</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data(){
		return {
			obj:{
				orderId:this.$route.query.id,
				memberId:localStorage.getItem('memberId'),
				evalDesc:'',
				evalStars:0,
				picUrlList:[],
				tagIdList:[]
			},
			value:0,
			tagList:[]
		}
	},
	activated() {
		this.init()
	},
	methods:{
		remove(i){
			this.obj.picUrlList.splice(i,1)
		},
		submit(){
			console.log({...this.obj})
			this.$ajax.insertOrdereValuate({...this.obj}).then(res=>{
				if(res.code==0){
					this.$toast.success('提交成功')
					this.$router.replace('/ordershow?id='+this.$route.query.id+'&productId='+this.$route.query.productId)
					//this.$router.require('/meber')
				}
			})
		},
		uploadImg(e){
			var that = this
			this.$fn.uploadImg(e).then(res=>{
				that.$ajax.uploadImg({base64Str:res.img,imgType:'.jpg'}).then(res=>{
					that.obj.picUrlList.push({picUrl:res.data.imgUrl})
				})
			})
		},
		selectag(v,i){
			var that = this
			if(!v.s){
				that.$set(that.tagList,i,{...that.tagList[i],s:true})
				that.obj.tagIdList.push({tagId:v.tagId})
			}else{
				that.$set(that.tagList,i,{...that.tagList[i],s:false})
				let index = that.obj.tagIdList.findIndex(el=>el==v.tagId)
				that.obj.tagIdList.splice(index,1)
			}			
		},
		init(){
			this.$ajax.getTgaByProductId({productId:this.$route.query.productId||0}).then(res=>{
				if(res.code==0){
					this.tagList = res.data.tagList
				}
			})
		},
		back(){
			this.$router.go(-1)
		}
	}
}
</script>